const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require("terser-webpack-plugin")
const merge = require('webpack-merge')
const developmentBaseConf = require('./webpack.base.conf')


module.exports = merge.smart(developmentBaseConf,{

    entry: ['./src/js/app.js', './src/index.html'],
    
    output: {
      filename: 'js/[name].[hash:8].js',   //添加了hash值, 实现静态资源的长期缓存
      publicPath: './'  //所有输出资源公共路径
    },

    module: {  //loader其他没有变化，只放了变化部分，只有需要修改路径部分改了
      rules: [

        
        // babel-loader
        {
            test: /\.js$/,
            exclude: /node_modules/,
            include: path.resolve(__dirname, 'src'),
            use: [
            {
                loader: 'babel-loader',
                options: {
                presets: ['@babel/preset-env']
                }
            }
            ]
        },

        // css
        {
            test: /\.css$/,  // 用正则去匹配要用该 loader 转换的 CSS 文件
            use: [
                MiniCssExtractPlugin.loader,
                // 'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },

        // sass
        {
            test: /\.scss$/,
            include: path.resolve(__dirname, 'src'),
            use: [
                MiniCssExtractPlugin.loader,
                // 'style-loader',
                'css-loader',
                'postcss-loader',
                'sass-loader'
            ]
        },

        // file-loader
        // {
        //     loader: 'file-loader',
        //     exclude: [  /\.js$/,/\.html$/, /\.json$/],
        //     options: {
        //         outputPath: 'media/',
        //         publicPath: '../dist/media/',
        //         name: '[hash:8].[ext]',
        //     },
        // },

        // 处理图片文件
        {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
                // url-loader
                {
                    loader: 'url-loader',
                    options: {
                        esModule: false, // 这里设置为false
                        limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处理
                        publicPath:"../",
                        name: 'images/[name].[hash:8].[ext]'
                    }
                },
                // img-loader
                {
                    loader: 'img-loader',
                    options: {
                        plugins: [
                            require('imagemin-gifsicle')({
                                interlaced: false
                            }),
                            require('imagemin-mozjpeg')({
                                progressive: true,
                                arithmetic: false
                            }),
                            require('imagemin-pngquant')({
                                floyd: 0.5,
                                speed: 2
                            }),
                            require('imagemin-svgo')({
                                plugins: [
                                    { removeTitle: true },
                                    { convertPathData: false }
                                ]
                            })
                        ]
                    }
                }
            ]
        }
      ]
    },

    plugins:[
        // new BundleAnalyzerPlugin(),
        new CleanWebpackPlugin(),
        // new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
        new MiniCssExtractPlugin({
            filename: "css/[name].[hash:8].css",
            chunkFilename: "css/[id].[hash:8].css"
        }),
        // new OptimizeCssAssetsPlugin({
        //     cssProcessorPluginOptions: {
        //       preset: ['default', { discardComments: { removeAll: true } }],
        //     },
        // }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     compress:{
        //       warnings:false,
        //       drop_console:true,
        //       drop_debugger:true,
        //     }
        // }),
          
    ],
    
    //公共模块插件：
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        },
        minimizer: [
            new TerserPlugin({
              sourceMap: true, // Must be set to true if using source-maps in production
              terserOptions: {
                compress: {
                  drop_console: true,
                },
              },
            }),
        ],
    },   

    mode: 'production',  //修改为生产环境
})
  